<template>
	<div style="background-color: #fff">
		<div class="List-item">
			<div class="Content-image">
				<img src="/static/image/userheader.jpg" class="Content-image" />
			</div>
			<div class="Content-head">
				<h1>Net5</h1>
				<div>
					<a href="http://www.baidu.com">0 回答</a>
					<a href="">0 文章</a>
					<a href="">0 关注者</a>
				</div>
			</div>
			<div class="Content-Extend">
				<el-button>关 注</el-button>
			</div>
		</div>

		<div class="List-item" v-for="user in userInfo.users" :key="user.ID">
			<a>{{ user.answer }}</a>
			<div class="Content-image">
				<img v-bind:src="user.imagurl" class="Content-image" />
			</div>
			<div class="Content-head">
				<h1>Net5</h1>
				<div>
					<a v-bind:href="user.userInfoUrl" target="_blank">0 回答</a>
					<a href="">{{ user.artle }} 文章</a>
					<a href="">{{ user.follower }} 关注者</a>
				</div>
			</div>
			<div class="Content-Extend">
				<el-button v-on="followerClick"> 关 注</el-button>
			</div>
		</div>
	</div>
</template>
<script>
/*https://api.zhihu.com/people/9629089dd75c2f233dcb8bd204e40dfb*/
export default {
	name: "UserInfoPage",
	data() {
		return {
			userInfo: {
				users: [
					{
						imagurl:
							"https://pic4.zhimg.com/v2-b6886dd11ee1c8ad82eb598a0071c607_xl.jpg",
						userInfoUrl:
							"https://pic4.zhimg.com/v2-b6886dd11ee1c8ad82eb598a0071c607_xl.jpg",
						answer: 100,
						follower: 28,
						artle: 10,
						ID: 1,
					},
					{
						imagurl:
							"https://pic4.zhimg.com/v2-9432aad2f9753307c25ebb34520c2a57_xl.jpg",
						userInfoUrl:
							"https://pic4.zhimg.com/v2-9432aad2f9753307c25ebb34520c2a57_xl.jpg",
						answer: 100,
						follower: 28,
						artle: 10,
						ID: 2,
					},
				],
				count: 2,
			},
		};
	},
	methods: {
		followerClick: function () {
			alert("aaa");
		},
	}, // created:vue生命周期中的钩子函数，在这个时间点，data中的数据已经注入到响应式系统中
	created() { 

		this.$http
			.get(
				"/people/9629089dd75c2f233dcb8bd204e40dfb"
				/*	{
					// 还可以直接把参数拼接在url后边
					params: {
						title: "眼镜",
					},
				}*/
			)
			.then((res) => {
				this.userInfo.users[0].imagurl = res.data.avatar_url;
			})
			.catch(function (error) {
				console.log(error);
			});
	},
};
</script>
<style scoped>
	.List-item {
		/*background-color: rgb(64, 180, 184);*/
		width: 100%;
		height: 100px;
		text-align: center;
		padding: 15px;
		padding: 10px;
		background-color: rgb(241 241 241);
		margin: 6px;
	}
	.Content-image {
		width: 100px;
		height: 100px;
		float: left;
	}
	.Content-head {
		margin: 10px;
		float: left;
		width: 60%;
	}
	.Content-Extend {
		margin: 10px;
	}
</style>